<template>
	<view class="city-root-box">
		<view class="city-content">
			<view class="citySelect"  v-if="selectLevel > 0">
				<AreaSelect :level="selectLevel" :init="citySelectInit" @select="citySelect" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		computed
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onBackPress
	} from '@dcloudio/uni-app'
	import {


	} from '@/api/other.js'
	import AreaSelect from '@/components/AreaSelect.vue'
	import {
		navigate,
		checkEmptyProperties
	} from '@/util/tools.js';
	const selectLevel = ref(0)
	const model = reactive({
		province_id: null,
		province_name: null,
		city_id: null,
		city_name: null,
		area_id: null,
		area_name: null,
		town_id: null,
		town_name: null,
		community_id:null,
		community_name:null
	})
	const citySelectInit = computed(() => {
		const {
			community_province_id,
			community_city_id,
			community_area_id,
			community_town_id,
			community_id
		} = model
		if (community_province_id && community_city_id && community_area_id && community_town_id && community_id) {
			return [model.community_province_id, model.community_city_id, model.community_area_id, model
				.community_town_id, model.community_id
			]
		} else {
			return []
		}
	})
	
	const removeEmptyProps=(obj)=>{
	  // 复制一份对象
	  const result = { ...obj }
	
	  // 遍历对象属性
	  Object.keys(result).forEach(key => {
	    const value = result[key]
	    if (value === null || value === undefined || value === '') {
	      delete result[key]
	    }
	  })
	
	  // 返回新的 reactive 对象
	  return reactive(result)
	}

	// 选择接单社区
	const citySelect = async (e) => {
		
		console.log('citySelect', e)
		if (e) {
			model.select = e.map(e => e.name).join('/')
			if(e[0]?.id){
				model.province_id = e[0].id
				model.province_name = e[0].name
			}
			if(e[1]?.id){
				model.city_id = e[1].id
				model.city_name = e[1].name
			}
			if(e[2]?.id){
				model.area_id = e[2].id
				model.area_name = e[2].name
			}
			if(e[3]?.id){
				model.town_id = e[3].id
				model.town_name = e[3].name
			}
			if(e[4]?.id){
				model.community_id = e[4].id
				model.community_name = e[4].name
			}
			console.log('select---value',model)
			
			let data=removeEmptyProps(model)
			uni.$emit('refreshAreaSelect',data)
			uni.navigateBack()
			
			
		}
	}
	
	onLoad((option) => {
		if(option.select_level){
			selectLevel.value = decodeURIComponent(option.select_level) * 1
			
		}
	})
	
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss">
	.city-root-box {
		
		background-color: #F6F4F7;
		background-position: top;
		/* 置顶 */
		background-repeat: no-repeat;
		/* 不重复 */
		background-size: 100% auto;
		/* 宽度撑满，高度自动保持比例 */
		min-height: 100vh;
		padding-top: 10rpx;

		
	}

</style>